<template>
    <div class="chat-container">
        <div class="header">
            <div class="header-left">
                <!-- 历史会话按钮 -->
                <button
                    class="history-button"
                    @mouseover="showHoverHistory = true"
                    @mouseleave="showHoverHistory = false"
                    @click="viewPastConversationsClicked"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
                    </svg>
                </button>
                <!-- 鼠标悬停时的历史会话下拉框 -->
                <div v-if="showHoverHistory" class="hover-history-dropdown" @mouseover="showHoverHistory = true" @mouseleave="showHoverHistory = false">
                     <h3>历史会话</h3>
                     <ul>
                         <!-- 遍历显示历史会话列表的前5个 -->
                         <li v-for="(conversation, index) in pastConversations.slice(0, 5)" :key="index" @click="loadConversation(conversation); showHoverHistory = false;">
                             {{ conversation.title || `会话 ${index + 1}` }}
                         </li>
                         <!-- 提示还有更多历史记录 -->
                         <li v-if="pastConversations.length > 5">...</li>
                     </ul>
                 </div>


                <div class="header-titles">
                    <span class="main-title">AI 一站式助手</span>
                    <!-- 动态显示的标题 -->
                    <span class="dynamic-title">{{ currentTitle }}</span>
                </div>
            </div>
            <!-- 新对话按钮 -->
            <button class="new-chat-button" @click="startNewChat">+ 新对话</button>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages">
            <!-- 遍历显示每条消息 -->
            <div v-for="item in messages" :key="item.id" class="message" :class="item.role">
                <!-- 消息上方显示的时间戳 -->
                <div class="message-timestamp">{{ formatTimestamp(item.timestamp) }}</div>
                <!-- 消息内容区域 -->
                <div class="message-content">
                     <b>{{ item.role === 'user' ? '我：' : 'AI：' }}</b>{{ item.text}} <!-- 显示发送者和消息文本 -->
                </div>
            </div>
        </div>

        <!-- 功能按钮区域 -->
        <div class="function-buttons">
            <button class="action-button" :class="{ selected: isDeepSearchSelected }" @click="toggleDeepSearch">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                </svg>
                深度思考
            </button>
            <button class="action-button" :class="{ selected: isReasoningSelected }" @click="toggleReasoning">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 11c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5s-3 1.34-3 3 1.34 3 3 3zm-2 9c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-2c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2zm8-1c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-2c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2v2zM12 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 15c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h4zM8 4c1.1 0 2-.9 2-2S9.1 0 8 0s-2 .9-2 2 .9 2 2 2z"/>
                </svg>
                推理
            </button>
            <button class="action-button" :class="{ selected: isWebSearchSelected }" @click="toggleWebSearch">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
                </svg>
                联网搜索
            </button>
            <button class="action-button" :class="{ selected: isRagSearchSelected }" @click="toggleRagSearch">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
                </svg>
                RAG检索
            </button>
        </div>

        <!-- 输入区域 -->
        <div class="input-area">
            <!-- 文件上传隐藏输入框 -->
            <input type="file" @change="handleFileUpload" ref="fileInput" style="display: none;" />
            <!-- 纸夹图标，触发文件上传 -->
            <button @click="triggerFileUpload" class="icon-button" :disabled="isRagSearchSelected && !hasUploadedFile">
                <span v-if="isRagSearchSelected && !hasUploadedFile" class="tooltip">RAG检索模式下需要先上传文件</span>
                📎
            </button>
            <!-- 聊天输入框，回车发送消息 -->
            <input 
                type="text" 
                v-model="input" 
                placeholder="你好" 
                @keyup.enter="canSendMessage && sendMessage()" 
                class="chat-input"
                :disabled="isRagSearchSelected && !hasUploadedFile"
            />
            <!-- 发送按钮 -->
            <button 
                @click="canSendMessage && sendMessage()" 
                class="icon-button send-button" 
                :disabled="!canSendMessage"
            >
                发送
            </button>
        </div>
        <!-- 文件上传状态显示 -->
        <p v-if="uploadStatus" class="upload-status">{{ uploadStatus }}</p>

        <!-- 点击按钮后显示的历史会话模态框 -->
        <div v-if="showHistoryModal" class="modal-overlay" @click.self="showHistoryModal = false"> <!-- 模态框覆盖层，点击自身关闭模态框 -->
            <!-- 模态框内容区域 -->
            <div class="modal-content clicked-modal">
                <h3>历史会话</h3>
                <!-- 历史会话列表 -->
                <ul>
                    <!-- 遍历显示历史会话 -->
                    <li v-for="(conversation, index) in pastConversations" :key="index" @click="loadConversation(conversation); showHistoryModal = false;">
                        {{ conversation.title || `会话 ${index + 1}` }}
                    </li>
                </ul>
                <!-- 关闭模态框按钮 -->
                <button @click="showHistoryModal = false">关闭</button>
      </div>
      </div>

    </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, onUnmounted } from 'vue'; // 从vue库导入所需的composition API函数
import axios from 'axios'; // 导入axios库用于HTTP请求

const input = ref(''); // 用户输入的状态变量，使用ref创建响应式数据
const messages = ref([]); // 存储聊天消息的数组，使用ref创建响应式数据
const selectedFile = ref(null); // 存储用户选择的文件，使用ref创建响应式数据
const fileInput = ref(null); // 文件输入元素的引用，用于触发点击，使用ref创建响应式数据
const uploadStatus = ref(''); // 文件上传状态或语音识别状态信息，使用ref创建响应式数据
const hasUploadedFile = ref(false); // 是否已上传文件的状态变量

// 动态标题相关的状态变量
const adjective = ref(''); // 标题中的形容词
const animal = ref(''); // 标题中的动物

// 动作按钮的选中状态
const isDeepSearchSelected = ref(false); // 深度搜索按钮是否选中
const isReasoningSelected = ref(false); // 推理按钮是否选中
const isWebSearchSelected = ref(false); // 联网搜索按钮是否选中
const isRagSearchSelected = ref(false); // RAG检索按钮是否选中

// 语音识别相关的状态变量
const isListening = ref(false); // 是否正在进行语音识别
let speechRecognition = null; // SpeechRecognition 实例变量

// 历史会话相关的状态变量
const pastConversations = ref([]); // 存储历史会话的数组
const showHistoryModal = ref(false); // 控制点击历史按钮后显示的模态框可见性
const showHoverHistory = ref(false); // 控制鼠标悬停历史按钮时显示的下拉框可见性

// AI响应加载状态
const isAILoading = ref(false); // AI是否正在生成响应

// 用于随机生成标题的数据列表
const adjectives = ['兴奋的', '开心的', '好奇的', '聪明的', '勇敢的', '可爱的'];
const animals = ['小熊', '小猫', '小狗', '小鸟', '兔子', '松鼠'];

// 计算属性：根据形容词和动物生成当前对话标题
const currentTitle = computed(() => {
    return `${adjective.value}${animal.value}的对话`;
});

// 函数：随机生成形容词和动物，更新标题
const generateRandomTitle = () => {
    const randomAdj = adjectives[Math.floor(Math.random() * adjectives.length)];
    const randomAnimal = animals[Math.floor(Math.random() * animals.length)];
    adjective.value = randomAdj;
    animal.value = randomAnimal;
};

// 函数：格式化时间戳为 HH:MM:SS 格式
const formatTimestamp = (date) => {
    if (!date) return '';
    const d = new Date(date); // 确保是Date对象
    const hours = d.getHours().toString().padStart(2, '0');
    const minutes = d.getMinutes().toString().padStart(2, '0');
    const seconds = d.getSeconds().toString().padStart(2, '0');
    return `${hours}:${minutes}:${seconds}`;
};

// 计算属性：是否可以发送消息
const canSendMessage = computed(() => {
    if (isRagSearchSelected.value) {
        return input.value.trim() && hasUploadedFile.value
    }
    return input.value.trim()
})

// 组件挂载后执行的操作 (生命周期钩子)
onMounted(() => {
    // 生成初始随机标题
    generateRandomTitle();

    // 初始化语音识别 API
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // 获取浏览器支持的SpeechRecognition对象
    if (SpeechRecognition) {
        speechRecognition = new SpeechRecognition(); // 创建SpeechRecognition实例
        speechRecognition.continuous = false; // 不持续监听，每次识别后停止
        speechRecognition.interimResults = true; // 获取中间结果，即识别过程中不断更新结果
        speechRecognition.lang = 'zh-CN'; // 设置识别语言为中文 (可根据需要调整)

        // 语音识别开始事件处理
        speechRecognition.onstart = () => {
            isListening.value = true; // 更新监听状态
            uploadStatus.value = '语音识别已开始...'; // 更新状态信息
        };

        // 语音识别结果事件处理
        speechRecognition.onresult = (event) => {
            let interimTranscript = ''; // 中间识别结果
            let finalTranscript = ''; // 最终识别结果

            for (let i = event.resultIndex; i < event.results.length; ++i) {
                if (event.results[i].isFinal) {
                    finalTranscript += event.results[i][0].transcript; // 如果是最终结果，添加到finalTranscript
                } else {
                    interimTranscript += event.results[i][0].transcript; // 如果是中间结果，添加到interimTranscript
                }
            }
            // 使用最终结果更新输入框，如果最终结果为空则使用中间结果
             input.value = finalTranscript || interimTranscript;
        };

        // 语音识别错误事件处理
        speechRecognition.onerror = (event) => {
            console.error('Speech recognition error', event); // 打印错误信息
            isListening.value = false; // 更新监听状态
            uploadStatus.value = `语音识别出错: ${event.error}`; // 更新状态信息
        };

        // 语音识别结束事件处理
        speechRecognition.onend = () => {
            isListening.value = false; // 更新监听状态
            uploadStatus.value = '语音识别已停止。'; // 更新状态信息
            // 如果需要，可以在识别结束后自动发送消息
            // if (input.value) sendMessage();
        };

    } else {
        uploadStatus.value = '抱歉，您的浏览器不支持语音识别。'; // 如果浏览器不支持，更新状态信息
        console.warn('Web Speech API not supported'); // 打印警告信息
    }
});

// 函数：切换语音识别状态 (开始/停止)
const toggleSpeechRecognition = () => {
    if (speechRecognition) {
        if (isListening.value) {
            speechRecognition.stop(); // 如果正在监听，则停止
        } else {
            // 在开始新的识别前清空之前的输入
            input.value = '';
            speechRecognition.start(); // 如果没有监听，则开始
        }
    }
};

// 函数：处理文件选择事件
const handleFileUpload = async (event) => {
    const file = event.target.files[0]
    if (!file) return

    const formData = new FormData()
    formData.append('file', file)

    try {
        uploadStatus.value = '正在上传和处理文件...'; // 更新上传状态信息
        const { data } = await axios.post(`${import.meta.env.VITE_API_URL}/upload/`, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

        if (data.status === 'success') {
            messages.value.push({
                id: Date.now(),
                text: `文件 "${file.name}" 上传成功！`,
                role: 'assistant',
                timestamp: new Date()
            });
            hasUploadedFile.value = true;
            uploadStatus.value = ''; // 上传成功后清除状态信息
        } else {
            uploadStatus.value = data.message || '文件处理失败';
            hasUploadedFile.value = false;
            messages.value.push({
                id: Date.now(),
                text: `文件上传失败: ${data.message}`,
                role: 'assistant',
                timestamp: new Date()
            });
        }
    } catch (error) {
        uploadStatus.value = `文件上传失败: ${error.message}`;
        hasUploadedFile.value = false;
        messages.value.push({
            id: Date.now(),
            text: `文件上传失败: ${error.message}`,
            role: 'assistant',
            timestamp: new Date()
        });
        console.error('文件上传失败:', error);
    }
};

// 函数：触发文件上传输入框的点击事件，打开文件选择对话框
const triggerFileUpload = () => {
    if (isRagSearchSelected.value && !hasUploadedFile.value) {
        messages.value.push({
            id: Date.now(),
            text: '请先上传知识库文件才能使用RAG检索功能。',
            role: 'assistant',
            timestamp: new Date()
        });
        return;
    }
    fileInput.value.click();
};

// 函数：发送聊天消息
const sendMessage = async () => {
    if (!input.value.trim()) return;
    
    const message = {
        id: Date.now(),
        text: input.value,
        role: 'user',
        timestamp: new Date()
    };
    
    messages.value.push(message);
    const userInput = input.value;
    input.value = '';
    
    isAILoading.value = true;
    
    try {
        const formData = new FormData();
        formData.append('query', userInput);
        formData.append('deep_search', isDeepSearchSelected.value);
        formData.append('reasoning', isReasoningSelected.value);
        formData.append('web_search', isWebSearchSelected.value);
        formData.append('rag_search', isRagSearchSelected.value);
        
        let days = 1;
        if (userInput.includes("明天")) {
            days = 2;
        } else if (userInput.includes("后天")) {
            days = 3;
        } else {
            const match = userInput.match(/(最近|未来|接下来)?(\d+)天/);
            if (match) {
                days = parseInt(match[2]);
                if (days < 1) {
                    days = 1;
                } else if (days > 5) {
                    days = 5;
                }
            }
        }
        
        const response = await axios.post(`${import.meta.env.VITE_API_URL}/chat`, formData);
        
        messages.value.push({
            id: Date.now(),
            text: response.data.response,
            role: 'assistant',
            timestamp: new Date()
        });
    } catch (error) {
        console.error('Error sending message:', error);
        messages.value.push({
            id: Date.now(),
            text: '抱歉，发生了错误，请稍后重试。',
            role: 'assistant',
            timestamp: new Date()
        });
    } finally {
        isAILoading.value = false;
    }
};

// 函数：处理"新对话"按钮点击事件
const startNewChat = () => {
    // 如果当前会话有消息，则保存当前会话到历史记录
    if (messages.value.length > 0) {
        pastConversations.value.push({
            title: currentTitle.value, // 使用当前标题作为历史会话标题
            messages: [...messages.value] // 保存消息的副本
        });
    }

    // 清空当前消息列表，开始新对话
    messages.value = [];
    uploadStatus.value = '新对话已开始。'; // 更新状态信息
    // 为新对话生成新的随机标题
    generateRandomTitle();
    // 重置动作按钮的选中状态，但保留文件上传状态
    isDeepSearchSelected.value = false;
    isReasoningSelected.value = false;
    isWebSearchSelected.value = false;
    isRagSearchSelected.value = false;
    // 如果正在进行语音识别，停止它
    if (isListening.value) {
        speechRecognition.stop();
    }
};

// 函数：处理点击"历史会话"按钮事件，显示历史会话模态框
const viewPastConversationsClicked = () => {
    showHistoryModal.value = true; // 显示模态框
    showHoverHistory.value = false; // 如果悬停下拉框可见，则隐藏它
};

// 函数：加载选定的历史会话
const loadConversation = (conversation) => {
    messages.value = [...conversation.messages]; // 将历史会话的消息加载到当前消息列表
    // 尝试解析历史会话的标题，以便恢复形容词和动物
    const titleMatch = conversation.title.match(/(.*)的(.*)的对话/);
     if (titleMatch && titleMatch.length > 2) {
        adjective.value = titleMatch[1]; // 提取形容词
        animal.value = titleMatch[2]; // 提取动物
    } else {
        // 如果标题格式不匹配，使用默认值
        adjective.value = '历史'; // 默认形容词
        animal.value = '会话'; // 默认动物
    }

    // showHistoryModal.value = false; // 关闭模态框 - 此行已移到inline点击处理中
    uploadStatus.value = '历史会话已加载。'; // 可选的状态信息
     // 加载历史聊天时重置动作按钮状态
    isDeepSearchSelected.value = false;
    isReasoningSelected.value = false;
    isWebSearchSelected.value = false;
    isRagSearchSelected.value = false;
};

// 函数：切换深度思考按钮的选中状态
const toggleDeepSearch = () => {
    isDeepSearchSelected.value = !isDeepSearchSelected.value;
    // 如果开启深度搜索，关闭其他模式
    if (isDeepSearchSelected.value) {
        isReasoningSelected.value = false;
        isWebSearchSelected.value = false;
        isRagSearchSelected.value = false;
    }
};

// 函数：切换推理按钮的选中状态
const toggleReasoning = () => {
    isReasoningSelected.value = !isReasoningSelected.value;
    // 如果开启推理，关闭其他模式
    if (isReasoningSelected.value) {
        isDeepSearchSelected.value = false;
        isWebSearchSelected.value = false;
        isRagSearchSelected.value = false;
    }
};

// 添加联网搜索切换函数
const toggleWebSearch = () => {
    isWebSearchSelected.value = !isWebSearchSelected.value;
    // 如果开启联网搜索，关闭其他模式
    if (isWebSearchSelected.value) {
        isDeepSearchSelected.value = false;
        isReasoningSelected.value = false;
        isRagSearchSelected.value = false;
    }
};

// 添加RAG检索切换函数
const toggleRagSearch = () => {
    isRagSearchSelected.value = !isRagSearchSelected.value;
    // 如果开启RAG检索，关闭其他模式
    if (isRagSearchSelected.value) {
        isDeepSearchSelected.value = false;
        isReasoningSelected.value = false;
        isWebSearchSelected.value = false;
    }
};

// 组件卸载时的清理函数
onUnmounted(() => {
    // 清理所有状态
    uploadStatus.value = '';
    hasUploadedFile.value = false;
    isDeepSearchSelected.value = false;
    isReasoningSelected.value = false;
    isWebSearchSelected.value = false;
    isRagSearchSelected.value = false;
    isListening.value = false;
    
    // 如果语音识别正在进行，停止它
    if (speechRecognition) {
        speechRecognition.stop();
    }
});

</script>

<style scoped>
/* 样式区域，这里是组件的CSS样式 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f0f2f5;
    font-family: sans-serif;
}

.header {
    position: relative; /* 定位需要，用于悬停下拉框的绝对定位 */
    display: flex;
    justify-content: space-between; /* 将标题和历史按钮推到左侧，新对话按钮推到右侧 */
    align-items: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.header-left {
    display: flex; /* 历史按钮和标题的容器 */
    align-items: center;
    gap: 10px; /* 历史按钮和标题之间的间距 */
}

/* 历史图标按钮样式 */
.history-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #555; /* 根据需要调整颜色 */
    transition: color 0.2s ease; /* 添加颜色过渡效果 */
}

.history-button:hover {
    color: #007bff;
}

.history-button svg {
    display: block;
    width: 24px; /* 根据需要调整大小 */
    height: 24px; /* 根据需要调整大小 */
    fill: currentColor; /* 使用当前文字颜色填充SVG */
}

/* 鼠标悬停历史按钮时显示的下拉框样式 */
.hover-history-dropdown {
    position: absolute;
    top: 40px; /* 定位在历史按钮下方 */
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 添加阴影 */
    z-index: 100; /* 确保在其他内容上方 */
    padding: 10px;
    width: 250px; /* 根据需要调整宽度 */
}

.hover-history-dropdown h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.hover-history-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px; /* 限制高度以显示约3-4个条目 */
    overflow-y: auto; /* 超过高度时显示滚动条 */
}

.hover-history-dropdown li {
    padding: 8px;
    cursor: pointer;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
    border-bottom: 1px solid #eee;
}

.hover-history-dropdown li:last-child {
    border-bottom: none;
}

.hover-history-dropdown li:hover {
    background-color: #f0f0f0;
}


.header-titles {
    display: flex; /* 将主标题和动态标题并排排列 */
    align-items: center;
    gap: 10px; /* 主标题和动态标题之间的间距 */
}

.main-title {
    color: #007bff; /* 主标题颜色示例 */
}

.dynamic-title {
    font-size: 0.8em; /* 动态标题字体大小 */
    font-weight: normal; /* 动态标题字体粗细 */
    color: #555;
    cursor: pointer; /* 指示可点击 */
    text-decoration: underline; /* 可点击标题的下划线示例 */
}

.dynamic-title:hover {
    color: #007bff; /* 鼠标悬停时改变颜色 */
}

.new-chat-button {
    padding: 8px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background-color: #6c757d; /* 灰色按钮 */
    color: white;
    font-size: 0.9em;
    transition: background-color 0.2s ease; /* 添加背景颜色过渡效果 */
}

.new-chat-button:hover {
     background-color: #5a6268;
}

.chat-messages {
    flex-grow: 1; /* 消息区域占据剩余空间 */
    overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
    margin-bottom: 15px;
    padding-right: 10px;
}

.message {
    display: flex;
    flex-direction: column; /* 时间戳和消息内容垂直堆叠 */
    margin-bottom: 15px;
    max-width: 80%;
}

.message.user {
    align-items: flex-end; /* 用户消息（时间戳和内容）靠右对齐 */
    margin-left: auto; /* 用户消息靠右 */
}

.message.ai {
    align-items: flex-start; /* AI消息（时间戳和内容）靠左对齐 */
    margin-right: auto; /* AI消息靠左 */
}

.message-timestamp {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 5px; /* 时间戳和消息内容之间的间距 */
    /* 文本对齐由父元素 .message.user/ai 处理 */
}


.message-content {
    padding: 10px 15px;
    border-radius: 18px;
    word-wrap: break-word; /* 长单词换行 */
    white-space: pre-wrap; /* 保留空白符和换行符 */
}

.message.user .message-content {
    background-color: #dcf8c6; /* 用户消息背景色 */
    color: #333;
    border-bottom-right-radius: 2px; /* 用户消息右下角圆角 */
}

.message.ai .message-content {
    background-color: #fff; /* AI消息背景色 */
    color: #333;
    border: 1px solid #e0e0e0; /* AI消息边框 */
    border-bottom-left-radius: 2px; /* AI消息左下角圆角 */
}

.function-buttons {
    margin-bottom: 15px;
    text-align: center;
    display: flex; /* 使用flexbox对齐图标和文本 */
    justify-content: center; /* 居中按钮 */
}

.action-button {
    margin: 0 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background-color: #007bff; /* 按钮背景色 */
    color: white;
    font-size: 1em;
    transition: background-color 0.2s ease; /* 添加背景颜色过渡效果 */

    display: inline-flex; /* 使用inline-flex使图标和文本水平对齐 */
    align-items: center; /* 垂直居中图标和文本 */
    gap: 5px; /* 图标和文本之间的间距 */
}

.action-button:hover {
    background-color: #0056b3;
}

.action-button.selected {
    background-color: #0056b3; /* 选中时颜色加深 */
}

.input-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid #ccc;
    background-color: #fff;
}

.icon-button {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
    color: #555;
}

.icon-button:hover {
    color: #007bff;
}

/* SVG图标样式 */
.icon-button svg,
.action-button svg {
    display: block;
    width: 20px; /* 根据需要调整大小 */
    height: 20px; /* 根据需要调整大小 */
    fill: currentColor; /* 使用按钮的文字颜色填充SVG */
}

.icon-button.listening {
     background-color: rgba(255, 0, 0, 0.3); /* 语音识别中时的浅红色背景 */
     border-radius: 50%; /* 使按钮变圆 */
}


/* 点击历史按钮后显示的模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    display: flex;
    justify-content: center; /* 默认居中模态框，被.clicked-modal覆盖 */
    align-items: center; /* 默认居中模态框，被.clicked-modal覆盖 */
    z-index: 1000; /* 确保在最上层 */
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%; /* 默认最大宽度 */
    max-height: 80%; /* 默认最大高度 */
    overflow-y: auto; /* 默认显示滚动条 */
    position: relative; /* 定位需要，用于关闭按钮（如果添加）的绝对定位 */
}

.clicked-modal {
    position: absolute; /* 绝对定位到左上角 */
    top: 20px; /* 距顶部距离 */
    left: 20px; /* 距左侧距离 */
    max-width: 300px; /* 设置合适宽度 */
    max-height: 200px; /* 限制高度以显示约3-4个条目 */
    overflow-y: auto; /* 确保可滚动 */
}

.modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.modal-content ul {
    list-style: none;
    padding: 0;
}

.modal-content li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer; /* 指示可点击 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
    border-bottom: 1px solid #eee;
}

.modal-content li:last-child {
    border-bottom: none;
}

.modal-content li:hover {
    background-color: #f0f0f0;
}

.modal-content button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
}

.modal-content button:hover {
    background-color: #0056b3;
}

.chat-input {
    flex-grow: 1; /* 输入框占据剩余空间 */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s ease; /* 添加边框颜色过渡效果 */
}

.chat-input:focus {
    border-color: #007bff;
}

.send-button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background-color: #28a745; /* 发送按钮背景色 */
    color: white;
    font-size: 1em;
    transition: background-color 0.2s ease; /* 添加背景颜色过渡效果 */
}

.send-button:hover {
    background-color: #218838;
}

.send-button:disabled {
    background-color: #999; /* 禁用时变灰 */
    cursor: not-allowed;
}

.upload-status {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    text-align: center;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}
</style>